<template>
<div class="container">
    <header class="customHeaderStyle">
        <div class="go-back" @click="turn">
            <i></i>
            <i></i>
            <i></i>
        </div>
        <div class="headerCustomTitle">支付完成</div>
    </header>
    <div style="height:3rem;"></div>
<div class="member">
    <h2>支付完成！</h2>
       <p> 请找身边的店员核销！</p>
</div>
    <qr-code id="qr" :text="message"></qr-code>
<div class="member">
    <p>核销码：{{$route.query.scanOrder}}</p>
</div>
 <!-- 优惠券弹窗 -->
 <my-coupons v-if='hasCoupon' :mycouponsdata = 'mycouponsdata'  @goOpenConpons="goOpenConpons"></my-coupons>
</div>
</template>
<script>
    // import { mapMutations, mapActions, mapGetters } from "vuex";
    import VueQRCodeComponent from 'vue-qrcode-component'
    import {getCancellationStatus} from '../../api/wxh/getData.js'
    import myCoupons from '../../real-components/showCoupons';
    import { Toast } from '../../utils/toast.js'
    import { MessageBox } from '../../ui-components'
    import axios from "axios";
    export default {
        data() {
            return {
                message: '',//二维码数据
                timer:'',
                timeDuration: 3000,
                hasCoupon:false,
                mycouponsdata:[]
            }
        },
        components: {
            'qr-code': VueQRCodeComponent,
            "my-coupons":myCoupons
        },
        beforeDestroy(){
			clearInterval(this.timer);
			this.timer = null;
		},
        created() {
            if (!this.$route.query.scanOrder) {
                Toast({
                    message: '生成核销码异常！',
                    duration: 2000,
                    type: 'fail'
                });
                return
            };
            let obj = {
                sessionId: this.$store.getters['wxh/sessionId'],
                orderNo: this.$route.query.scanOrder
            }
            this.message = JSON.stringify(obj);
            this.getCoupons();
            this.getScanOrder();
        },
        methods: {
            turn() {
                if (this.$route.query.Page) {
                    this.$router.go(-1);
                } else {
                    this.$router.push('/main/order');
                }
            },
            async getScanOrder(){
				let req = await getCancellationStatus(this.$route.query.scanOrder);
				if(req.status !== 200)return;
				if(req.data.returnCode === 0)return
				if(req.data.returnCode === 1){
					if(req.data.data[0].cancellationStatus === 1){
						this.cancellationState = 1;
						
                        MessageBox.alert('核销成功！')
                        .then(action => {
                            this.$router.push('/main/order');
                        })
						clearInterval(this.timer);
						this.timer = null; 
						return
					}
					if(req.data.data[0].cancellationStatus === 0)return
				}
				
            },
            getCoupons() {
                // 优惠券弹窗接口
                let orderNo= this.$route.query.scanOrder
                let options = {
                    method: "get",
                    url: api.trade_host + "/marketCenter/getVirtualGiftInfo/" + orderNo,
                    headers: {sessionId: localStorage.getItem("sessionId")}
                };
                axios(options).then(resdata => {
                    if (resdata.data.returnCode != 0 && resdata.data.data.length > 0 ) {
                        this.hasCoupon = true
                        this.mycouponsdata = resdata.data.data
                    }
                })
            },
             // 关闭优惠券弹窗
            goOpenConpons() {
                console.log('扫码购关闭了！')
                this.hasCoupon = false;
            },
        }
    }
</script>

<style scoped>
.customHeaderStyle{
		position: relative;
		background: #fff;
		min-height: 3rem;
		border-bottom: 1px solid #eaeaea;
		color: #444;
		font-weight: 700;
		left: 0;
		top: 0;
		line-height: 2.25rem;
		/* z-index: 2; */
		width: 100%;
		font-size: .9rem;
		text-align: center;
		margin: 0;
		padding: 0;
	}
	.headerCustomTitle{
		overflow: hidden;
		right: 6rem;
		font-weight: 500;
		min-height: 2.25rem;
		position: absolute;
		margin: 0;
		text-align: left;
		white-space: nowrap;
		left: 3rem;
		width: auto;
		text-overflow: ellipsis;
		z-index: 2;
		font-size: 1.1rem;
		margin-top: .35rem;
		top: 1px;
	}
	#app{
		background: #fff;
	}
	#qr{
		margin:auto;
		margin-top:2rem;
		display: flex;
		justify-content: space-around;
		width: 55%;
		height: 30%;
	}
	.member {
		margin: auto;
		margin-top: 1rem;
		width: 90%;
	}
	.container {
    background: #fff;
    height: 100%;

	}
	.line_top {
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		width: 80%;
		margin: auto;
		margin-top:2rem;
		height: 4rem;
    align-items: center;
    border-top: 1px solid #eaeaea;
	}
  .line_top div {
    display: flex;
    flex-grow: 1;
    justify-content: space-around;
  }
	.prerogative {
		display: inline-block;
		width: 6rem;
		height: 1rem;
		position: absolute;
		margin: auto;
    margin-top: -.5rem;
    background: #fff;
    top: 0;
    left: 35%;
    color: #999999;
	}
	.inner {
		position: relative;
	}

</style>